<script setup>
defineOptions({ name: 'SearchPage' })
import { ref, onActivated } from 'vue'
import { useRouter } from 'vue-router'
import { useHistoryStore } from '@/stores'
const router = useRouter()
const historyStore = useHistoryStore()
// 搜索关键词
const searchKey = ref('')
// 历史记录
const historyList = ref([])
historyList.value = historyStore.getHistory()

// 搜索
const onSearch = (key) => {
  if (key.length <= 0) {
    showToast('搜索关键词不能为空')
    return
  }
  // console.log(historyList.value)
  const index = historyList.value.indexOf(key)
  if (index !== -1) {
    historyList.value.splice(index, 1)
  }
  historyList.value.unshift(key)

  historyStore.setHistory(historyList.value)

  searchKey.value = key

  router.replace(`/searchlist?search=${key}`)
}

const clearHistory = (key) => {
  if (key === undefined) {
    // 清空历史记录
    historyList.value = []
    console.log('清空历史记录')
  } else {
    // 删除特定的历史记录
    const index = historyList.value.indexOf(key)
    if (index !== -1) {
      historyList.value.splice(index, 1)
    }
    console.log('清空第' + index + '个历史记录')
  }

  // 保存更改到 store
  historyStore.setHistory(historyList.value)
}
// 用于构造 URL
// const getSearchUrl = (key) => {
//   return `/searchlist?search=${key}`
// }
const searchInput = ref(null)
onActivated(() => {
  // 调用时机为首次挂载
  // 以及每次从缓存中被重新插入时
  searchInput.value.focus()
})
</script>
<template>
  <div class="search">
    <van-nav-bar
      title="搜索歌曲"
      left-arrow
      @click-left="router.go(-1)"
      fixed
    />
    <van-sticky :offset-top="46">
      <van-search
        v-model="searchKey"
        show-action
        placeholder="请输入搜索关键词"
        clearable
        clear-trigger="always"
        @search="onSearch(searchKey)"
        shape="round"
        ref="searchInput"
      >
        <template #action>
          <div @click="onSearch(searchKey)" class="van-haptics-feedback">
            搜索
          </div>
        </template>
      </van-search>
    </van-sticky>
    <!-- 搜索历史 -->
    <div class="search-history" v-if="historyList.length > 0">
      <!-- v-if="historyList.length > 0" -->
      <div class="title">
        <span>搜索历史</span>
        <van-icon @click="clearHistory()" name="delete-o" size="18" />
      </div>
      <van-list finished-text="没有更多了">
        <van-cell-group inset>
          <van-cell
            class="van-haptics-feedback"
            size="large"
            v-for="item in historyList"
            :key="item"
            :title="item"
            @click="onSearch(item)"
          >
            <!-- 使用 right-icon 插槽来自定义右侧图标 -->
            <template #right-icon>
              <van-icon name="cross" @click.stop="clearHistory(item)" />
              <!-- <van-icon name="search" class="search-icon" /> -->
            </template>
          </van-cell>
        </van-cell-group>
      </van-list>
    </div>
  </div>
</template>
<style scoped>
::v-deep .van-search__action {
  /* 透明背景 */
  /* background: transparent; */
  /* background-color: #f5f5f5; */
  color: #1989fa;
  padding: 0 20px;
  border-radius: 0 5px 5px 0;
  margin-right: 10px;
  border: 0.1px solid #1989fa;
}
::v-deep .van-icon-arrow-left {
  color: var(--van-nav-bar-icon-color);
}
.title {
  height: 40px;
  line-height: 40px;
  font-size: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
  color: #1989fa;
}
.van-cell-group--inset {
  --van-cell-group-inset-padding: 1 var(--van-padding-md);
}
</style>
